<template>
  <span
    class="w-tag"
    v-on="$attrs"
    @click="
      $emit('update:modelValue', !modelValue);
      $emit('input', !modelValue);
    "
    @keypress.enter="
      $emit('update:modelValue', !modelValue);
      $emit('input', !modelValue);
    "
    :class="classes"
    :role="modelValue !== -1 && 'button'"
    :aria-pressed="modelValue !== -1 && (modelValue ? 'true' : 'false')"
    :tabindex="modelValue !== -1 && 0"
    :style="styles"
  >
    <slot></slot
    ><i
      class="w-icon w-tag__closable wi-cross"
      v-if="closable && modelValue"
      @click.stop="
        $emit('update:modelValue', false);
        $emit('input', false);
      "
      role="icon"
      aria-hidden="true"
    ></i>
  </span>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-tag",

  props: {
    modelValue: { type: [Boolean, Number], default: -1 },
    color: { type: String },
    bgColor: { type: String },
    dark: { type: Boolean },
    shadow: { type: Boolean },
    tile: { type: Boolean },
    round: { type: Boolean },
    closable: { type: Boolean },
    outline: { type: Boolean },
    noBorder: { type: Boolean },
    xs: { type: Boolean },
    sm: { type: Boolean },
    md: { type: Boolean },
    lg: { type: Boolean },
    xl: { type: Boolean },
    width: { type: [Number, String] },
    height: { type: [Number, String] }
  },

  emits: ["input", "update:modelValue"],
  setup(props, ctx) {
    const presetSize = computed(() => {
      return (
        (props.xs && "xs") ||
        (props.sm && "sm") ||
        (props.lg && "lg") ||
        (props.xl && "xl") ||
        "md"
      );
    });
    const classes = computed(() => {
      return {
        [props.color]: props.color,
        [`${props.bgColor}--bg`]: props.bgColor,
        [`size--${props.presetSize}`]: true,
        "w-tag--dark": props.dark && !props.outline,
        "w-tag--clickable": props.modelValue !== -1,
        "w-tag--outline": props.outline,
        "w-tag--no-border": props.noBorder || props.shadow,
        "w-tag--tile": props.tile,
        "w-tag--round": props.round,
        "w-tag--shadow": props.shadow
      };
    });
    const styles = computed(() => {
      return {
        width: (!isNaN(props.width) ? `${props.width}px` : props.width) || null,
        height:
          (!isNaN(props.height) ? `${props.height}px` : props.height) || null
      };
    });
    return {
      presetSize,
      classes,
      styles
    };
  }
};
</script>
